import configPromise from '@payload-config';
import { notFound } from 'next/navigation';
import type { Metadata } from 'next/types';
import { getPayload } from 'payload';
import React, { cache } from 'react';

import { PostsList } from '@/components/PostsList';

export const revalidate = 600;

type Args = {
  params: Promise<{
    slug: string;
  }>;
};

export default async function Page({ params: paramsPromise }: Args) {
  const { slug } = await paramsPromise;
  const category = await queryCategoryBySlug({ slug });

  if (!category) {
    notFound();
  }

  return (
    <div className='pb-12'>
      <div className='container mb-16'>
        <div className='prose max-w-none dark:prose-invert'>
          <h1>{category.title}</h1>
        </div>
      </div>

      <PostsList postType='hub' categorySlug={slug} />
    </div>
  );
}

export async function generateMetadata({ params: paramsPromise }: Args): Promise<Metadata> {
  const { slug } = await paramsPromise;
  const category = await queryCategoryBySlug({ slug });

  return {
    title: `${category?.title || 'Category'} | Hub`,
  };
}

export async function generateStaticParams() {
  const payload = await getPayload({ config: configPromise });
  const categories = await payload.find({
    collection: 'categories',
    limit: 1000,
    overrideAccess: true,
  });

  return categories.docs.map((category) => ({
    slug: category.slug,
  }));
}

const queryCategoryBySlug = cache(async ({ slug }: { slug: string }) => {
  const payload = await getPayload({ config: configPromise });

  const categories = await payload.find({
    collection: 'categories',
    where: {
      slug: {
        equals: slug,
      },
    },
    limit: 1,
  });

  return categories.docs[0] || null;
});